import React, { ReactNode } from 'react';
import styles from './index.module.scss';
import classnames from 'classnames';
interface InputProps
  extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
  extra?: ReactNode;
  className?: string;
  errorMsg?: string;
}

export default function Input({ extra, className, errorMsg, ...restProps }: InputProps) {
  return (
    <div className={styles.root}>
      <input className={classnames('input', className)} {...restProps} />
      {errorMsg && <div className="validate">{errorMsg}</div>}
      {extra && <div className="extra">{extra}</div>}
    </div>
  );
}
